<template>
	<VantNav title="申请咖啡券" />
	
	<div class="apply">
		<van-form @submit="onSubmit">
			<van-cell-group inset>
			  <van-field
				v-model.trim="reason"
				rows="2"
				autosize
				label="申请原因"
				type="textarea"
				maxlength="50"
				placeholder="请输入申请原因"
				show-word-limit
			  />
			  
			<van-field
			  v-model="user"
			  is-link
			  readonly
			  label="审核人"
			  placeholder="请选择审核人"
			  @click="showPicker = true"
			/>
			<van-popup v-model:show="showPicker" position="bottom">
			  <van-picker confirm-button-text=""
				:columns="teachers"
				@click-option="onConfirm"
				@cancel="showPicker = false"
			  />
			</van-popup>  
			
			</van-cell-group>
			
			<div style="margin: 16px;">
			  <van-button round block type="primary" native-type="submit">申请</van-button>
			</div>
		</van-form>
	</div>
	
	
	<van-tabbar v-model="active" route>
	  <van-tabbar-item icon="gift-o" :to="{name: 'home'}">我的咖啡券</van-tabbar-item>
	  <van-tabbar-item icon="label-o" :to="{name: 'apply'}">申请咖啡券</van-tabbar-item>
	</van-tabbar>
</template>

<script>
import VantNav from '../components/VantNav.vue' ;

export default {
	components: {
		VantNav,
	},
	data() {
		return {
			active: 1, 
			showPicker: false,
			user: "",
			userId: null ,
			reason: "" ,
			teachers: [
				{ text: '张三', value: '1' },
				{ text: '李四', value: '2' },
				{ text: '王五', value: '3' },
				{ text: '赵六', value: '4' },
				{ text: '陆奇', value: '5' },
			],
		}
	},
	
	methods: {
		
		onConfirm({ selectedOptions }) {
			this.user = selectedOptions[0]?.text;
			this.userId = selectedOptions[0]?.value;
			this.showPicker = false;
		},
		onSubmit() {
			if (this.reason === "") {
				this.$layer.msg("申请原因不允许为空");
				return ;
			}
			if (this.userId == null) {
				this.$layer.msg("审核人不允许为空");
				return ;
			}
			
		}
	}
}
</script>

<style scoped>
.apply {
	margin-top: 20px;
}	
</style>